<template>
	<view class="home-content">
		<image src="https://pic.imgdb.cn/item/630580a016f2c2beb137e7c4.png" mode="widthFix" class="top-bg"></image>
		<CustomNav :custom="custom" title="项目进度" :isBack="true" backColor="#fff" :topBgColor="topBgColor" color="#fff"></CustomNav>
		<view :style="'margin-top:'+(custom.statusBar+custom.nvaMartom+custom.navHeight+20)+'rpx'" class="search-block">
			<view class="input-block">
				<view class="iconfont icon-sousuo"></view>
				<input placeholder-style="color:#efefef" placeholder="请输入关键字"/>
			</view>
		</view>
		<view class="tab-block">
			<view :class="tabAcitve==1?'selected':''" @click="tabAcitve=1" class="tab-item">城建类</view>
			<view :class="tabAcitve==2?'selected':''" @click="tabAcitve=2" class="tab-item">能源类</view>
			<view :class="tabAcitve==3?'selected':''" @click="tabAcitve=3" class="tab-item">化工类</view>
			<view :class="tabAcitve==4?'selected':''" @click="tabAcitve=4" class="tab-item">民生类</view>
		</view>
		<view class="list-block">
			<navigator hover-class="none" :url="'/pages/project/detail?id='+item.id" v-for="(item,index) in list" :key="item.id" class="list-item">
				<view class="name">{{item.name}}</view>
				<view class="label-block">
					<view class="label-item">负责人：{{item.head}}</view>
					<view class="label-item">人员：{{item.number}}</view>
					<view class="label-item">工时：{{item.working}}</view>
				</view>
				<view class="progress-block">
					<view class="name-block">
						<view class="name">项目进度</view>
						<view class="time">{{item.time}}</view>
					</view>
					<progress :percent="item.progress" border-radius="20rpx" :stroke-width="8" activeColor="#076df3" backgroundColor="#efefef"></progress>
					<view class="phase"><text :style="'left:calc('+item.progress+'% - 110rpx)'">{{item.phase}}</text></view>
				</view>
				<view class="info-block">
					<view class="info-item">
						<view class="value">{{item.contract}}</view>
						<view class="label">合同金额</view>
					</view>
					<view class="info-item">
						<view class="value">{{item.income}}</view>
						<view class="label">收入金额</view>
					</view>
					<view class="info-item">
						<view class="value">{{item.invoice}}</view>
						<view class="label">发票金额</view>
					</view>
					<view class="info-item">
						<view class="value">{{item.returnedMoney}}</view>
						<view class="label">回款金额</view>
					</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				custom:null,
				topBgColor:'rgba(0,0,0,0)',
				tabAcitve:1,
				list:[
					{id:1,name:'甲醇加注站建设项目',head:'王刚',number:'325人',working:'8个月',time:'2022.11.30',progress:50,phase:'施工阶段',contract:'200万',income:'170万',invoice:'70万',returnedMoney:'90万'},
					{id:2,name:'瓜州县北大桥第六风电场C区200兆瓦项目',head:'李华',number:'681人',working:'6个月',time:'2022.10.21',progress:100,phase:'施工阶段',contract:'600万',income:'300万',invoice:'150万',returnedMoney:'100万'},
					{id:3,name:'甲醇加注站建设项目',head:'王刚',number:'325人',working:'8个月',time:'2022.11.30',progress:50,phase:'施工阶段',contract:'200万',income:'170万',invoice:'70万',returnedMoney:'90万'},
					{id:4,name:'瓜州县北大桥第六风电场C区200兆瓦项目',head:'李华',number:'681人',working:'6个月',time:'2022.10.21',progress:100,phase:'施工阶段',contract:'600万',income:'300万',invoice:'150万',returnedMoney:'100万'},
					{id:5,name:'甲醇加注站建设项目',head:'王刚',number:'325人',working:'8个月',time:'2022.11.30',progress:50,phase:'施工阶段',contract:'200万',income:'170万',invoice:'70万',returnedMoney:'90万'},
					{id:6,name:'瓜州县北大桥第六风电场C区200兆瓦项目',head:'李华',number:'681人',working:'6个月',time:'2022.10.21',progress:100,phase:'施工阶段',contract:'600万',income:'300万',invoice:'150万',returnedMoney:'100万'},
				]
			}
		},
		methods:{
			
		},
		onPageScroll(e) {
			if(e.scrollTop>=1){
				//this.topBgColor='linear-gradient(to right,#656ef9,#7f3ee4)'
				this.topBgColor='#086df3'
			}else{
				this.topBgColor='rgba(0,0,0,0)';
			}
		},
		onLoad(){
			this.custom=this.utils.getCustomNavData();
		}
	}
</script>

<style lang="scss" scoped> 
	.home-content{
		overflow: hidden;
		.top-bg{
			width: 100%;
			position: absolute;
		}
		.search-block{
			position: relative;
			width: 100%;
			height: 60rpx;
			padding: 0 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.input-block{
				width:100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				border: 1px solid #fff;
				border-radius: 40rpx;
				padding:0 10rpx;
				height: 60rpx;
				.iconfont{
					flex-grow: 0;
					color: #fff;
					margin: 0 10rpx;
				}
				input{
					flex-grow: 1;
					font-size: 28rpx;
					color: #fff;
				}
			}
		}
		.tab-block{
			position: relative;
			width: calc(100% - 60rpx);
			margin: 0 auto;
			margin-top: 30rpx;
			display: flex;
			flex-direction: row;
			.tab-item{
				width: calc((100% - 60rpx)/4);
				margin-right: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #fff;
				font-size: 24rpx;
				color: #000;
				border-radius: 8rpx;
				height: 60rpx;
			}
			.tab-item.selected{
				color:$uni-color-primary;
			}
			.tab-item:last-child{
				margin-right: 0;
			}
		}
		.list-block{
			position: relative;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			.list-item{
				background: #fff;
				border-radius:12rpx;
				box-shadow:0 0 10px 0px #e8e8e8;
				padding: 20rpx 20rpx;
				margin-bottom: 30rpx;
				display: flex;
				flex-direction: column;
				.name{
					font-weight: bold;
					font-size: 30rpx;
				}
				.label-block{
					display: flex;
					flex-direction: row;
					flex-wrap:wrap;
					margin-top: 20rpx;
					.label-item{
						background: #efefef;
						color: #979799;
						font-size: 28rpx;
						padding: 4rpx 14rpx;
						border-radius: 16rpx;
						margin-right: 16rpx;
						margin-bottom: 16rpx;
					}
				}
				.progress-block{
					display: flex;
					flex-direction: column;
					.name-block{
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-bottom: 10rpx;
						.name{
							font-weight: normal;
							flex-grow: 1;
						}
						.time{
							flex-grow: 0;
							color: $uni-color-primary;
							font-size: 26rpx;
						}
					}
					.phase{
						margin: 10rpx auto;
						height: 40rpx;
						width: 100%;
						position: relative;
						text{
							font-size: 26rpx;
							position: absolute;
							color:$uni-color-primary;
						}
					}
				}
				.info-block{
					display: flex;
					flex-direction: row;
					.info-item{
						width: 25%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						border-right: 1px solid #efefef;
						.value{
							font-size: 34rpx;
							font-weight: bold;
						}
						.label{
							color: #999;
							font-size: 26rpx;
							margin-top: 10rpx;
						}
					}
					.info-item:last-child{
						border: none;
					}
				}
			}
			.list-item:last-child{
				margin-bottom: 0;
			}
		}
	}
</style>